// 获取元素
var container = document.querySelector('#container');
var gamescene = container.querySelector('#gamescene');
//正在加载图片视图
var imgView;
var imgViewBg;
//登录视图
var loginView;
//游戏主场景
var mainView;
//游戏中各种数据
var gameDatas = {};
//图片加载完成度
var imgLoadRate = 0;

// 游戏版本号
var version = 111;

var loadRate;

var msgTopArr = [3.3, 2.4, 4.2, 1.5, 5.1, 0.6, 6, 6.9, 7.8, 8.7];
var msgIndexArr = ['f', 'f', 'f', 'f', 'f', 'f', 'f', 'f', 'f', 'f'];

// ajax error
var ajaxError = 'ajax错误';
var ajaxDataError = '服务器返回数据格式错误';

(function () {
    //显示加载图片
    gamescene.innerHTML = `<div style="width: 100%;height: 4.5rem; position: absolute; left: 0; top: 25%; transform: translate(0, -50%); text-align: center; font-size: 0.6rem; margin-top: 2.2rem;">
        <h3 style="margin-bottom: 0.3rem;">健康游戏忠告</h3>
        <div>抵制不良游戏，拒绝盗版游戏。</div>
        <div>注意自我保护，谨防受骗上当。</div>
        <div>适度游戏益脑，沉迷游戏伤身。</div>
        <div>合理安排时间，享受健康生活。</div>
        </div>
    `;
    //<!--#include file="login.asp"-->

    imgView = gamescene.children[0];

    setTimeout(() => {
        gamescene.innerHTML = '<img src="https://i03piccdn.sogoucdn.com/8501bf7653bfabe9" alt="图片加载失败" style="width: 100%;height: 100%; position: absolute;">';

        imgViewBg = gamescene.children[0];

        imgViewBg.onload = function () {
            // 动态引入jquery
            importJs('js/jquery-3.5.1.min.js', document.body);

            // 动态引入css
            importCss('css/game.css?v=' + version, document.body);

            //主场景视图
            importJs('js/main.js?v=' + version, document.body);

            //预加载所有图片######################################################
            const images = `
                <img src="images/mainbg.png">
                <img src="images/land/land_grass.png">
                <img src="images/land/land_lock.png">
                <img src="images/land/land_plain.png">
                <img src="images/land/land_red.png">
                <img src="images/land/land_black.png">
                <img src="images/land/land_purple.png">
                <img src="images/land/land_blue.png">
                <img src="images/land/land_gold.png">
                <img src="images/crop/1.png">
                <img src="images/crop/2.png">
                <img src="images/crop/3.png">
                <img src="images/crop/4.png">
                <img src="images/crop/5.png">
                <img src="images/crop/6.png">
                <img src="images/crop/7.png">
                <img src="images/crop/8.png">
                <img src="images/crop/9.png">
                <img src="images/crop/10.png">
                <img src="images/crop/11.png">
                <img src="images/crop/12.png">
                <img src="images/crop/13.png">
                <img src="images/crop/14.png">
                <img src="images/crop/15.png">
                <img src="images/crop/16.png">
                <img src="images/crop/17.png">
                <img src="images/crop/18.png">
                <img src="images/crop/19.png">
                <img src="images/crop/20.png">
                <img src="images/crop/21.png">
                <img src="images/crop/22.png">
                <img src="images/crop/23.png">
                <img src="images/crop/24.png">
                <img src="images/crop/25.png">
                <img src="images/crop/26.png">
                <img src="images/crop/27.png">
                <img src="images/crop/28.png">
                <img src="images/crop/29.png">
                <img src="images/crop/30.png">
                <img src="images/product/2.png">
                <img src="images/product/4.png">
                <img src="images/product/6.png">
                <img src="images/product/8.png">
                <img src="images/product/10.png">
                <img src="images/product/12.png">
                <img src="images/product/14.png">
                <img src="images/product/16.png">
                <img src="images/product/18.png">
                <img src="images/product/20.png">
                <img src="images/product/22.png">
                <img src="images/product/24.png">
                <img src="images/product/26.png">
                <img src="images/product/28.png">
                <img src="images/product/30.png">
                <img src="images/main/coin.png">
                <img src="images/main/exp.png">
                <img src="images/main/diamond.png">
                <img src="images/main/extend.png">
                <img src="images/main/reap.png">
                <img src="images/main/house.png">
                <img src="images/main/sickle.png">
                <img src="images/main/close.png">
                <img src="images/main/setting.png">
                <img src="images/main/shop.png">
                <img src="images/main/upgrade_land.png">
                <img src="images/main/mine.png">
                <img src="images/main/can-mine.png">
            `;

            var readyImages = document.querySelector('#readyImages');

            readyImages.innerHTML = images;

            imgLoadFun();
        }
    }, 2000);
}());


// 动态引入css方法，第一个参数是css文件路径，第二个参数是挂载到哪个节点的后面，第三个参数是追加还是覆盖
function importCss(path, dom) {
    var link = document.createElement('link');
    link.href = path;
    link.rel = 'stylesheet';
    link.type = 'text/css';
    dom.appendChild(link);
};


// 动态引入js方法
function importJs(path, dom) {
    var script = document.createElement('script');
    script.type = "text/javascript";
    script.src = path;
    dom.appendChild(script);
}

// 弹出消息框
function popMessage(data) {
    const messageStr = `<div id="message-wrap"><span class="left"></span><span class="center">${data}</span><span class="right"></span></div>`;
    var div = document.createElement('div');
    div.innerHTML = messageStr;
    div = div.firstElementChild;
    gamescene.appendChild(div);
    div.style.transition = 'top 0.3s';
    div.style.pointerEvents = 'none';
    div.offsetTop;
    var i = msgIndexArr.findIndex(item => item === 'f');
    div.i = i;
    if (i !== -1) {
        msgIndexArr[i] = 't';
        div.style.top = msgTopArr[i] + 'rem';
    } else {
        div.style.top = '3.3rem';
    }

    setTimeout(function () {
        msgIndexArr[div.i] = 'f';
        div.parentNode.removeChild(div);
    }, 3000);
}

// 弹出对话框
function popDialog(data, number, callback) {
    const dialogStr0 = `
        <div id="dialog-wrap">
            <div class="dialog">
                <div class="con">${data}</div>
                <div class="btn-wrap">
                    
                </div>
            </div>
        </div>
    `;
    const dialogStr1 = `
        <div id="dialog-wrap">
            <div class="dialog">
                <div class="con">${data}</div>
                <div class="btn-wrap">
                    <button class="yes">√</button>
                </div>
            </div>
        </div>
    `;
    const dialogStr2 = `
        <div id="dialog-wrap">
            <div class="dialog">
                <div class="con">${data}</div>
                <div class="btn-wrap">
                    <button class="no">×</button>
                    <button class="yes">√</button>
                </div>
            </div>
        </div>
    `;
    var div = document.createElement('div');
    if (number === 0) {
        div.innerHTML = dialogStr0;
        setTimeout(() => {
            dialogWrap.parentNode && dialogWrap.parentNode.removeChild(dialogWrap);
        }, 5000);
    } else if (number === 1) {
        div.innerHTML = dialogStr1;
    } else if (number === 2) {
        div.innerHTML = dialogStr2;
    }
    div = div.children[0];
    gamescene.appendChild(div);

    var dialogWrap = gamescene.querySelector('#dialog-wrap');
    dialogWrap.onclick = function (e) {
        if (e.target === this) {
            // this.parentNode.removeChild(this);
        } else if (e.target.className === 'no') {
            this.parentNode.removeChild(this);
        } else if (e.target.className === 'yes') {
            this.parentNode.removeChild(this);
            callback && callback();
        }
    }
}

//资源全部加载完毕调用的方法
window.onload = function () {

}

// 图片加载完毕后的回调函数
function imgLoadFun() {
    var readyImages = document.querySelector('#readyImages');
    var imgs = readyImages.querySelectorAll('img');
    var div = document.createElement('div');
    div.className = 'loadRate';
    div.style.width = '100%';
    div.style.height = '2.5rem';
    // div.style.backgroundColor = '#fff';
    div.style.fontSize = '0.5rem';
    div.style.textAlign = 'center';
    div.style.lineHeight = '1rem';
    div.style.position = 'absolute';
    div.style.top = '50%';
    div.style.transform = 'translate(0, -50%)';
    div.style.backgroundImage = 'linear-gradient(to right, rgba(255,255,255,0.5), rgba(255,255,255,1), rgba(255,255,255,0.5))';
    div.innerHTML = '首次加载较慢，请耐心等待';
    gamescene.appendChild(div);
    loadRate = gamescene.querySelector('.loadRate');

    var len = imgs.length;
    for (let i = 0; i < len; i++) {
        imgs[i].onload = function () {
            imgLoadRate++;
            div.innerHTML = '<div>首次加载较慢，请耐心等待<br>图片加载中，进度： ' + imgLoadRate + ' / ' + len + '<br><progress id="progress"></progress></div>';
            progress.max = len;
            progress.value = imgLoadRate
            if (imgLoadRate === len) {
                // dom全部加载完毕，进入登录界面
                loadRate.innerHTML = '';
                loadRate.style = '';
                gamescene.appendChild(loginView);
            }
        }
    }
}
